<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="body">
    <!-- 头部导航栏 -->
    <nav class="navBar">
        <a href="../run.html" class="on">跑步</a>
        <a href="../riding.html">骑行</a>
        <a href="../drill.html">课程训练</a>
    </nav>
    <!-- 身体 -->
    <main class="main">

        <!-- 目前跑步距离 -->
        <section class="distance">
            <p>目前累积跑步距离:</p>
            <div>
                999.99
                <span>公里</span>
            </div>
        </section>
        <!-- 地图 -->
        <section class="map">
            <!-- run状态栏 -->
            <div class="mapState">
                <a href="">户外跑</a>
                <a href="">燃脂跑</a>
                <a href="">跑步机</a>
            </div>

            <!-- go按钮 -->
            <a href="#">
                <div class="go">
                    GO
                </div>
            </a>

            <!-- 工具栏 -->
            <div class="mapTool">
                <article class="mapSet">
                    <i  class="iconfont icon-shouye1"></i>
                </article>
                <a href="">设置目标</a>
                <article class="mapMusic">
                    <i  class="iconfont icon-yinle"></i>
                </article>    
            </div>
        </section>
        <!-- 跑步路线 -->
        <section class="path">
            <h1>跑步路线</h1>
            <p>使用跑步路线邂逅附近的同行者</p>
            <img src="../../assets/img/right.png" width="20px" alt="">
        </section>
    </main>
    <!-- 底部导航栏 -->
    <nav class="tapBar">
    </nav>
</body>

</html>